<template>
  <div class="bg">
    <div id="main"></div>
  </div>
</template>

<script setup lang="ts">
import { start } from "nprogress";
import { onBeforeUnmount, onMounted, Ref, ref } from "vue";
import * as zrender from "zrender";
import { ZRenderType } from "zrender";

let zr: ZRenderType;
const marks = [
  { x: 200, y: 200, id: 1 },
  { x: 400, y: 200, id: 2 },
  { x: 200, y: 400, id: 3 },
  { x: 400, y: 400, id: 4 }
];
const traj1To4 = [
  [200, 230],
  [250, 230],
  [250, 310],
  [300, 310],
  [300, 400]
];
const traj2To4 = [
  [420, 200],
  [420, 300],
  [400, 300]
];
const traj3To4 = [
  [300, 400],
  [300, 450],
  [400, 450]
];
const traj1To3 = [
  [100, 200],
  [100, 400]
];
const traj2To3 = [
  [400, 280],
  [200, 280]
];
const traj1To2 = [
  [300, 200],
  [300, 150],
  [400, 150]
];
const trajs: number[][][][] = [
  [[], traj1To2, traj1To3, traj1To4],
  [traj1To2.slice().reverse(), [], traj2To3, traj2To4],
  [traj1To3.slice().reverse(), traj2To3.slice().reverse(), [], traj3To4],
  [
    traj1To4.slice().reverse(),
    traj2To4.slice().reverse(),
    traj3To4.slice().reverse(),
    []
  ]
];
function drawMarks() {
  marks.forEach(mark => {
    let circle = new zrender.Circle({
      shape: {
        cx: mark.x,
        cy: mark.y,
        r: 5
      },
      style: {
        fill: "#000",
        stroke: "#000",
        lineWidth: 2
      }
      // onmouseover: function (params) {
      //   console.log(params);
      // }
    });
    circle.on("click", function () {
      // console.log("click the circle");
      // alert("click the circle");
      alert(mark.id);
    });
    zr.add(circle);
  });
}
function Point2point() {
  const plan = [3, 1, 4, 2];
  // const plan = [1, 4, 2, 3];
  const subtractedPlan = plan.map(val => val - 1);
  const points = [];
  for (let i = 1; i <= plan.length; i++) {
    points.push([
      marks[subtractedPlan[i - 1]].x,
      marks[subtractedPlan[i - 1]].y
    ]);
  }
  // points.splice(1, 0, ...traj2To4);
  const insertpoints = [];
  // let insertpoints: Array<number>[];
  let num = 0;
  console.log("trajs:", trajs);
  console.log("trajs[0][3]:", trajs[0][3].length);
  for (let i = 0; i < plan.length - 1; i++) {
    const strat = plan[i];
    const end = plan[i + 1];
    // trajs[strat - 1][end - 1].forEach(point => {
    //   insertpoints.push(point);
    // });
    console.log("lengthen:", trajs[strat - 1][end - 1].length);
    for (let j = 1; j <= trajs[strat - 1][end - 1].length; j++) {
      insertpoints.push(trajs[strat - 1][end - 1][j - 1]);
    }
    console.log("insertpoints:", insertpoints);
    // console.log(insertpoints);
    points.splice(num + 1 + i, 0, ...insertpoints);
    console.log("insertpoints.length", insertpoints.length);
    num = num + insertpoints.length;
    insertpoints.splice(0, insertpoints.length);
    console.log("points", points);
    console.log("i", i);
  }
  console.log(points);
  // some operations
  const accLenList = [0];
  for (let i = 1; i < points.length; i++) {
    const p1 = points[i - 1];
    const p2 = points[i];
    const dist = zrender.vector.dist(p1, p2);
    accLenList.push(accLenList[i - 1] + dist);
  }
  const percentList = accLenList.map(acc => {
    return acc / accLenList[accLenList.length - 1];
  });
  const line = new zrender.Polyline({
    shape: {
      points: points,
      smooth: 0
    },
    style: {
      fill: "transparent",
      stroke: "#FF6EBE",
      lineWidth: 5
    }
  });
  // zr.add(line);
  const triangle = new zrender.Polygon({
    shape: {
      points: [
        [0, -5],
        [5, 0],
        [-5, 0]
      ]
    },
    style: {
      fill: "blue"
    },
    z: 2
  });
  triangle.setPosition([points[0][0], points[0][1]]);
  // triangle.position = [points[0][0], points[0][1]];
  // console.log(triangle.position);
  // ZRender以逆时针为正
  triangle.rotation = -Math.PI / 2;
  let frame = 1;
  triangle.__t = 0;
  triangle
    .animate("", true)
    .when(3000, { __t: 1 })
    .during((obj, i) => {
      for (let j = 1; j < percentList.length; j++) {
        if (i > percentList[j - 1] && i < percentList[j]) {
          frame = j;
          break;
        }
      }
      const angle = -Math.atan2(
        points[frame][1] - points[frame - 1][1],
        points[frame][0] - points[frame - 1][0]
      );
      triangle.rotation = angle - Math.PI / 2;
      // zrender.vector.lerp(triangle.position, [334, 374], [463, 374], i);
      zrender.vector.lerp(
        triangle.position,
        points[frame - 1],
        points[frame],
        (i - percentList[frame - 1]) /
          (percentList[frame] - percentList[frame - 1])
      );
      // triangle.position = [334 + 139 * i, 374];
    })
    .start();

  zr.add(line);
  zr.add(triangle);
}
function drawLine() {
  // 创建一个圆circle
  const points = [
    [334, 374],
    [463, 374],
    [463, 346],
    [541, 346],
    [541, 361]
  ];
  const accLenList = [0];
  for (let i = 1; i < points.length; i++) {
    const p1 = points[i - 1];
    const p2 = points[i];
    const dist = zrender.vector.dist(p1, p2);
    accLenList.push(accLenList[i - 1] + dist);
  }
  const percentList = accLenList.map(acc => {
    return acc / accLenList[accLenList.length - 1];
  });
  const line = new zrender.Polyline({
    shape: {
      points: points
    },
    style: {
      stroke: "#FF6EBE",
      fill: "transparent"
    }
  });
  // 三角形
  const triangle = new zrender.Polygon({
    shape: {
      points: [
        [0, -5],
        [5, 0],
        [-5, 0]
      ]
    },
    style: {
      fill: "blue"
    },
    z: 2
  });
  triangle.position = [points[0][0], points[0][1]];
  // console.log(triangle.position);
  // ZRender以逆时针为正
  triangle.rotation = -Math.PI / 2;
  let frame = 1;
  triangle.__t = 0;
  triangle
    .animate("", true)
    .when(3000, { __t: 1 })
    .during((obj, i) => {
      for (let j = 1; j < percentList.length; j++) {
        if (i > percentList[j - 1] && i < percentList[j]) {
          frame = j;
          break;
        }
      }
      const angle = -Math.atan2(
        points[frame][1] - points[frame - 1][1],
        points[frame][0] - points[frame - 1][0]
      );
      triangle.rotation = angle - Math.PI / 2;
      // zrender.vector.lerp(triangle.position, [334, 374], [463, 374], i);
      zrender.vector.lerp(
        triangle.position,
        points[frame - 1],
        points[frame],
        (i - percentList[frame - 1]) /
          (percentList[frame] - percentList[frame - 1])
      );
      // triangle.position = [334 + 139 * i, 374];
    })
    .start();

  zr.add(line);
  zr.add(triangle);
}
onMounted(() => {
  zr = zrender.init(document.getElementById("main"));
  drawMarks();
  // drawLine();
  Point2point();
  // drawCircle();
});
onBeforeUnmount(() => {
  zr.dispose();
});
</script>

<style scoped>
.bg {
  width: 1000px;
  height: 800px;
  background: url("../../../assets/images/apartment.jpg");
  background-size: 100% 100%;
}
#main {
  width: 1000px;
  height: 800px;
  border: 1px gray solid;
}
</style>
